<template>
  <div v-if="isView">
    <el-card style="width: 60%; margin: 0 auto">
<!--博客编写标题-->
      <div>
        <h1>发布微博</h1>
        <hr style="color: rgb(81,87,239)">
      </div>

<!-- 选择博客标签  -->
      <div>
        <el-form :model="blog" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--发表标题-->
          <el-form-item label="微博标题" prop="tittle">
            <el-input v-model="blog.tittle" ></el-input>
          </el-form-item>

<!--发表地址-->
          <el-form-item label="发表地址" prop="Address">
            <el-row>
              <el-col span="8">
                <el-select class="arriveClass" v-model="blog.region1" placeholder="请选择省份" @change="provinceChange($event)">
                  <el-option v-for="(item,index) in provinceList" :key="item.name" :value="item.name"></el-option>
                </el-select>
              </el-col>

              <el-col span="8">
                <el-select class="arriveClass" v-model="blog.region2" placeholder="请选择城市" @change="cityChange($event)">
                  <el-option v-for="(item,index) in cityList" :key="index" :value="item.name"></el-option>
                </el-select>
              </el-col>

              <el-col span="8">
                <el-select class="arriveClass" v-model="blog.region3" placeholders="请选择区县">
                  <el-option v-for="(item,index) in countyList" :key="index" :value="item.name"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>

<!--发表时间-->
            <el-form-item label="发表时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="blog.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择时间" v-model="blog.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>

<!--博客类型-->
            <el-form-item label="微博类型" prop="type">
              <el-radio-group v-model="blog.type">
                <el-radio label="风景" ></el-radio>
                <el-radio label="美食" ></el-radio>
                <el-radio label="人文" ></el-radio>
              </el-radio-group>
            </el-form-item>

<!--博客是否公开-->
            <el-form-item label="是否公开" prop="authority">
              <el-radio-group v-model="blog.authority">
                <el-radio label="公开"></el-radio>
                <el-radio label="不公开"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>

<!-- 编写博客内容和上传图片和视频  -->
      <el-row style="width: 100%;margin: 0 auto">
        <el-col span="4">

        </el-col>
          <el-col span="20">
            <div>
              <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="blog.content">
              </el-input>
            </div>
          </el-col>、
        </el-row><br><br>

<!--图片上传 -->
        <div>
          <el-upload ref="elupload" action="" multiple :auto-upload="false" :http-request="handleupload"  list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>上传图片,视频<br><br><br><br>

<!--发布和重置按钮-->
      <div>
        <el-button style="margin-top: 12px;" @click="next">发布</el-button>
        <el-button style="margin-top: 12px;" @click="back(blog)">重置</el-button>
      </div>
    </el-card>
  </div>

</template>

<script>

import {getAddress} from "@/api/baidu";
import {uploadFile} from "@/api/api";
import {setBlog} from "@/api/api";
import {setSession} from "@/utils/Token";

export default {
  name: "edit_home",
  components: {},

  data(){
    return{

      active:0,
      /*博客*/
      blog: {
        content:'',
        tittle: '',
        date1: '',
        date2: '',
        type: '',
        authority: '',
        region1:'',
        region2:'',
        region3:'',
        image:{},
        video:{},
      },
      /*验证规则*/
      rules: {
        tittle: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择发表区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择微博类型', trigger: 'change' }
        ],
        authority: [
          { required: true, message: '请选择是否公开', trigger: 'change' }
        ],

      },

      /*视图控制*/
      isView:false,
      /*省份信息*/
      provinceList:[],
      cityList:[],
      countyList:[],
      CITY:[],
      XIAN:[],
      /*文件列表*/
      fileList:[],
    }
  },
  methods: {

    /*多文件上传*/
    handleupload(param) {
      this.fileList.push(param.file);// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
    },

    /*发布博客*/
    next() {
        let formData = new FormData();
        this.$refs.elupload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
        this.fileList.forEach(item => {
          formData.append("file", item)  //将每一个文件图片都加进formdata
        })
        console.log(formData);
        uploadFile(formData).then((res)=>{
          if(res.data.status === 200){
            this.blog.image = res.data.data.image
            this.blog.video = res.data.data.video
            setBlog(this.blog).then((res)=>{
              if(res.data.status===200){
                this.$message({message: res.data.msg,type:'success'});
                setSession('title','个人-全部');
                setSession('index','4');
                setSession('title1','个人');
                setSession('group-index','4-1');
                setSession('activeIndex','1-1-1');
                this.$router.push('/oneself');
              }
            })
          }else{
            this.$refs.elupload.clearFiles();
          }
        })
    },

    /*重置内容*/
    back(formName){

    },

    /*根据选中省去匹配市*/
    provinceChange(that){
      let cityCode = 0
      let newCityArry = []
      this.provinceList.forEach((item,index)=>{
        if(item.name == that){
          cityCode = item.code
        }
      })
      console.log(cityCode)
      if(cityCode){
        this.cityList = []
        this.CITY.forEach((item,index)=>{
          if(item.code == cityCode){
            this.cityList.push(item)
          }
        })  /* 市匹配成功*/
      }
    },

    /*根据选中市去匹配县，区*/
    cityChange(that){
      let countyCode = 0
      let cityname = ''
      let newCountyArry = []
      this.cityList.forEach((item,index)=>{
        if(item.name == that){
          countyCode = item.id
          cityname = item.name
        }
      })
      if(countyCode){
        this.countyList = []
        this.XIAN.forEach((item,index)=>{
          if(item.code == countyCode && item.cityCountyName == cityname){
            this.countyList.push(item)
          }
        })
      }
    },
  },
  /*创建时，获取省份信息*/
  created() {
    getAddress().then((res)=>{
      this.provinceList = res.data.districts[0].districts  /*省*/
      /* 进行遍历赋值*/
      /* 市区和县区*/
      let newProvince = this.provinceList
      for(let i = 0; i < newProvince.length; i++){              /* 省级*/
        for(let j = 0; j < newProvince[i].districts.length; j++){       /* 市级*/
          let city = newProvince[i].districts[j].name
          this.CITY.push({id:j+1,name:city,code:i+1})
          for(let k = 0;k<newProvince[i].districts[j].districts.length; k++){/* 县级*/
            let xian = newProvince[i].districts[j].districts[k].name
            this.XIAN.push({id:k+1,name:xian,code:j+1,cityCountyName:city})
          }
        }
      }
      for(let m = 0; m < newProvince.length;m++){
        newProvince[m] = {...newProvince[m],...{code:m+1}}
      }
      this.provinceList = newProvince;
      this.isView = true;
    })

  }
}
</script>

<style scoped>

</style>